<template>
    <div class="storyBox">
        <h5>创作故事</h5>
        <div class="con">
        {{detail.creatStory}}
        </div>
        <!-- <div class="videoBox">
            <video ref="videoEle">
                <source src="http://cqwanqiao.dev.1plus.store/uploads/test.mp4" type="video/mp4">
                您的浏览器不支持Video标签。
            </video>
            <span class="playBtn" ref="playBtn" @click.stop="play">
                <i v-if="playIng" class="iconfont icon-pause-full"></i>
                <i v-else class="iconfont icon-bofang"></i>
            </span>
        </div> -->
        <!-- <div class="audioBox">
            <audio ref="audioEle" controls>
                <source src="/11.mp3" type="audio/mpeg">
                您的浏览器不支持 audio 元素。
            </audio>
            <span class="playBtn" @click="audioPlay" style="display:none">播放</span>
        </div> -->
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            detail:computed(()=>store.state.arApi.detail),
            playIng:false,  // 播放中
            st:''
        })

        const play = ()=>{
            clearTimeout(state.st)
            if(state.playIng){ // 播放中,则暂停
                proxy.$refs.videoEle.pause()
                proxy.$refs.videoEle.controls = false
                state.playIng = false
            }else{  // 播放
                proxy.$refs.videoEle.play()
                proxy.$refs.videoEle.controls = true
                state.playIng = true
                // 3秒后隐藏按钮
                state.st = setTimeout(()=>{
                    proxy.$refs.playBtn.style.display="none"
                },3000)
            }  
        }

        const showBtn = ()=>{  // 显示按钮
          state.st && clearTimeout(state.st) 
          proxy.$refs.playBtn.style.display="flex"
        }

        const audioPlay = ()=>{
            console.log("播放总时长：",proxy.$refs.audioEle.duration)
            proxy.$refs.audioEle.play()
        }

        return{
            ...toRefs(state),
            play,
            audioPlay,
            showBtn
        }
    }
}
</script>

<style lang="scss" scoped>
    .storyBox{
        padding: 0 40px 30px 40px;
        h5{
            font-size: 36px;
            font-weight: bold;
            color:var(--baseColor);
            line-height: 40px;
            border-top: 2px solid rgba(217, 217, 217, 0.3);
            padding: 30px 0 0 0;
        }
        .con{
            font-size: 28px;
            line-height: 46px;
            padding: 30px 0 0 0;
        }
        .videoBox{
            position: relative;
            z-index: 10;
            border: 2px solid #F8CB97;
            margin: 30px 0 0 0;
            video{
                position: relative;
                z-index: 10;
                width: 100%;
            } 
            .playBtn{
                display: flex;
                position: absolute;
                z-index: 20;
                width: 96px;
                height: 96px;
                background: rgba(0, 0, 0, 0.5);
                border-radius:50% ;
                left: 50%;
                top: 50%;
                margin: -48px 0 0 -48px;
                justify-content: center;
                align-items: center;
            }
        }
        .audioBox{
            padding: 30px 0 0 0;
        }
    }
</style>